<template>
  <div class="blog-container">
    <div class="blog-container__main">
      <div class="blog-container__left">
        <nav-wrap
          width="112px"
          :list="list"
        ></nav-wrap>
      </div>
      <div class="blog-container__center">
        <card-container
          width="816px"
          :title="labelTitle"
        >

          <empty-card v-if="blogList.length===0" height="556px"></empty-card>
          <blog-card v-for="(val,index) in blogList" :key="val.blogId" :info="val"></blog-card>

        </card-container>
        <div class="pagination">
          <pagination style="margin: 0 auto;" :pages="pages" ref="pagination" v-on:listenPageChange="changePage"></pagination>
        </div>
      </div>
      <div class="blog-container__right">
        <div class="right__write-blog" @click="toRelease">写文章</div>
        <card-container
          title="热门博主"
          width="302px"
          style="margin-top: 16px;padding-bottom: 10px"
        >
          <user-card v-for="(item, index) in hotBloggerList" :key="item.userId" :info="item"></user-card>
        </card-container>
        <card-container
          title="热门标签"
          width="302px"
          style="margin-top: 16px;max-height: 446px;"
        >
          <div class="tags-wrap">
            <div class="tag-box" v-for="(item, index) in hotTagsList" :key="item.tagId">
              <span>{{item.tagName}}</span>
              <span>（{{item.referenceCount}}）</span>
            </div>
          </div>
        </card-container>
      </div>
    </div>
  </div>
</template>

<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";

import Pagination from "../../components/pc/pagination";
import config from '../../action/config';
import BlogCard from "../../components/pc/projectCard";
import EmptyCard from "../../components/pc/emptyCard";
import UserCard from "../../components/pc/userCard2";
export default {

  components: {UserCard, EmptyCard, Pagination, CardContainer, NavWrap,BlogCard},
  async asyncData({$axios,query}){
    let typeList = await $axios.$get(config.api.get.BlogCategory.list);



    let  params={
      page:1,
      size:12
    };

    if(query && query.type!=='all' ){
      params.categoryId = query.type
    }

    let   articleList = await  $axios.$get(config.api.get.Blog.list,{params:params});
    return {articleList:articleList.data.dataList, articlePages:articleList.data.totalPage,typeList:typeList.data}

  },
  data(){
    return{
      blogList:[],
      currentPage:1,
      pages:1,
      hotBlogList: [],
      hotTagsList: [],
      hotBloggerList: [],
      labelTitle:'',
      showPagination:true,
      showPaginationTimer:null,
      list: [
        {
          label: '全部博客',
          address: '/blog',
          type: 'all'
        },
      ],
      firstLoad:true

    }
  },
  created() {
    this.dataGetBlogCategory();
    this.dataGetHotTagsList();
    this.dataGetHotBloggersList();
    this.handleArticleList();
  },
  watch: {
    $route: function () {
      this.restartPagination();
      this.getLabelTitle();
    }
  },
  methods: {
    handleArticleList(){
      this.blogList = this.articleList;
      this.pages = this.articlePages;
    },

     dataGetBlogCategory(){
       let type = this.$route.query.type;
       if(type==='all'){
         this.labelTitle = '全部博客'
       }
       this.typeList.map((val) => {
           this.list.push({
             label: val.category,
             address: '/blog',
             type: val.categoryId.toString(),
             childList:[],
             title:val.categoryFull
           })
         if(val.categoryId.toString()===type){
           this.labelTitle = val.categoryFull||val.category
         }
       })
       this.typeList.map(async (val,index) => {
         if(!val.leaf){
           let childListData = await this.$axios.$get(config.api.get.BlogCategory.childList+val.categoryId+'/categories')
           let childList =[];
           childListData.data.map((val,index)=>{
             childList.push({
               label: val.category,
               address: '/blog',
               childId: val.categoryId.toString(),
               title:val.categoryFull
             })
             if(val.categoryId.toString()===type){
               this.labelTitle = val.categoryFull||val.category
             }
           })
           this.list[index+1].childList = childList
         }
       })
    },
    getLabelTitle(){

      let type = this.$route.query.type;
        this.list.map((val,index)=>{

          if(val.childList){
            val.childList.map((chVal) => {
              if(chVal.childId===type){
                this.labelTitle = chVal.title||chVal.label
              }
            })
          }
          if(val.type===type){
            this.labelTitle = val.title||val.label
          }
        })
    },
    restartPagination(){
      if(process.browser){
        this.blogList = [];
        this.$refs.pagination.setCurrentPage(1)
      }
    },
    dataGetBlogList(currentPage){
      let params={
        page:currentPage,
        size:12
      };
      if(this.$route.query.type && this.$route.query.type!=='all' ){
        params.categoryId = this.$route.query.type
      }
      this.$axios.$get(config.api.get.Blog.list, {params:params})
        .then((response)=>{
          this.blogList=response.data.dataList;
          this.pages = response.data.totalPage;
        })
    },
    dataGetHotTagsList(){
      let params={
        page:1,
        size:7
      };
      this.$axios.$get(config.api.get.Tag.hotTags,{params:params})
        .then((response)=>{
          this.hotTagsList = response.data.dataList;
        })

    },
    dataGetHotBloggersList() {
      let params={
        page: 1,
        size: 12
      };
      this.$axios.$get(config.api.get.User.hotBloggers,{params:params})
        .then((response)=>{
          this.hotBloggerList = response.data.dataList;
        });
    },

    toRelease(){
      this.$router.push('/blog/release')
    },
    changePage(currentPage){
      //返回页数 请求新的数据
      if(this.firstLoad){
        this.firstLoad = false
      }else{
        this.dataGetBlogList(currentPage)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.blog-container{
  > .blog-container__main{
    width: $pageWidth;
    margin: 0 auto;
    padding-top: 16*$length;
    padding-bottom: 32*$length;
    @extend %flex-row-spb;
    align-items: start;
    .blog-container__left{}
    .blog-container__center{
      .pagination{
        margin: 32*$length;
      }
    }
    .blog-container__right{
      .right__write-blog{
        width: 302*$length;
        background-color: #fff;
        @include fontStyle(14,56,500,#00AAE6,center);
        @include border-radius(4*$length);
        @extend %animate-transition;
        @extend %cursorPointer;
        &:hover {
          color: #fff;
          background-color: #00AAE6;
        }
      }
      .tags-wrap{
        padding: 10*$length 10*$length 30*$length;
        .tag-box{
          display: inline-block;
          margin-right: 10*$length;
          margin-bottom: 10*$length;
          padding: 2*$length 9*$length;
          background-color: #F4F8FA;
          @include border-radius(2*$length);
          @extend %cursorPointer;
          @extend %animate-transition;
          @include fontStyle(12, 22, 500, #999, center);
          &:hover {
            color: #fff;
            background-color: #00AAE6;
          }
        }
      }
    }
  }
}
</style>
